import { Component } from "react";

interface IProps {
  statusText: string;
  onChange: (text: string) => void;
}

export default class TodoFooter extends Component<IProps> {
  render() {
    const { statusText, onChange } = this.props;

    return (
      <footer className="footer">
        <ul className="filters">
          <li
            className={statusText === "All" ? "selected" : ""}
            onClick={() => onChange("All")}
          >
            All
          </li>
          <li
            className={statusText === "Active" ? "selected" : ""}
            onClick={() => onChange("Active")}
          >
            Active
          </li>
          <li
            className={statusText === "Completed" ? "selected" : ""}
            onClick={() => onChange("Completed")}
          >
            Completed
          </li>
        </ul>

        <button className="clear"> Clear completed </button>
      </footer>
    );
  }
}
